<div id="content" style="position: relative;min-height: 100%;">
	<div id="fix_overflow">
		<div class="row s_page_title">
			<sa-big-breadcrumbs [items]="['运输任务','运输任务列表']" icon="fa fa-truck" class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
		</div>
		<sa-widgets-grid>
			<div class="s_table">
				<div sa-widget [editbutton]="false" color="darken" class="clearfix">
					<header><span class="widget-icon"> <i class="fa fa-table"></i> </span><h2>运输任务列表</h2></header>
					<div>
						<div class="widget-body no-padding">
							<div class="page-header clearfix s_table_opreation" style="padding-bottom: 0;position: relative;">
								<div class="left page-header-btn">
									<div class="top_module">
										<span class="module_text">车牌号</span>
										<div class="s_hover_box">
											<select   class="select2"  id="carNumberSelect2">
												<option value=''></option>
											</select>
											<div class="s_del_icon" (click)='del_carNumber()'>x</div>
										</div>
									</div>
									<div class="selectDate top_module">
										<div class="input-daterange input-group s_selected_time_box s_hover_box">
											<input type="text" [(ngModel)]='startTime' class="form-control s_selected_time" id="datetimepicker1"  autocomplete="off" placeholder="选择开始时间"/>
											<span class="s_selected_time_spe">至</span>
											<input type="text" [(ngModel)]='endTime' class="form-control s_selected_time" id="datetimepicker2"  autocomplete="off" placeholder="选择结束时间"/>
											<div class="s_del_icon" (click)='del_date()'>x</div>
										</div>
									</div>
									<button type="button" class="btn btn-primary" (click)="table_search()">查询</button>
								</div>
								<div style="height: 76px;"></div>
								<div class="clearfix s_btn_group" >
						          	<button class="btn btn-primary" [ngClass]="{isAtive:btnNum === 'all'}" (click)="btnClick('all')" style="border-right: 1px solid #ddd;">全部 {{allData}}
						          	</button><button class="btn btn-primary" [ngClass]="{isAtive:btnNum === 'normal'}" (click)="btnClick('normal')" style="border-right: 1px solid #ddd;">卸货状态<span class="green">[正常] {{normalData}}</span>
						          	</button><button class="btn btn-primary" [ngClass]="{isAtive:btnNum === 'abnormal'}" (click)="btnClick('abnormal')" style="border-right: 1px solid rgb(238,238,238);">卸货状态<span class="red">[异常] {{abnormalData}}</span></button>
						        </div>
							</div>
							<div class="table_scroll">
								<table class="display dataTables responsive table table-striped table-bordered table-hover dataTable s_h5_table">
									<thead>
										<tr>
											<th>车牌号码</th>
											<th>厂站名</th>
											<th>装载重量(吨)</th>
											<th>进场时间</th>
											<th>离场时间</th>
											<th>卸货开始时间</th>
											<th>卸货完成时间</th>
											<th>装载耗时</th>
											<th>卸载耗时</th>
											<th>运输时长</th>
											<th>状态</th>
											<th>卸货地址</th>
											<th>审核状态</th>
										</tr>
									</thead>
									<tbody>
										<tr *ngFor="let row of tableData; let i = index" [attr.data-index]="i" [ngClass]='{selected: activeSelected === row.id }' (click)="rowSelectEvent(row,i)" >
											<td>{{row.carNumber}}</td>
											<td>
											  	<span>{{row.loadArea}}</span>
											</td>
											<td>{{row.lastLoadWeight}}</td>
											<td>{{row.enterDate}}</td>
											<td>{{row.leaveDate}}</td>
											<td>{{row.unloadStartDate}}</td>
											<td>{{row.unloadEndDate}}</td>
											<td>{{row.loadTime}}</td>
											<td>{{row.unloadTime}}</td>
											<td>{{row.transportTime}}</td>
											<td>
												<span *ngIf="row.status === -1" class="red">卸货异常[未在指定区域卸货]</span>
									            <span *ngIf="row.status === 1" class="green">正常卸货</span>
									            <span *ngIf="row.status === 2">在途</span>
									            <span *ngIf="row.status === 3">在场</span>
											</td>
											<td>{{row.unloadAddress}}</td>
											<td>
											  	<span>待审核</span>
											</td>
										</tr>
									</tbody>
								</table>
							</div>
							<div class="table-fix clearfix">
								<paginator [totalRecords]="totalCount"
							           [rows]="pageSize"
							           [currentPage]="curPage - 1"
							           (onPageChange)="paginate($event)">
								</paginator>
								<button type="button" class="btn default refresh_btn" (click)="refresh()"><i class="fa fa-refresh"></i></button>
							</div>
						</div>
					</div>
				</div>
			</div>
		</sa-widgets-grid>
		<div id="popPage">
		<!--<div id="closePop" (click)="colsePop()" style="background-color: rgba(0,0,0,.5);height: 100%;width: 15%;position: absolute;left: 0;"></div>-->
			<div *ngIf='isloading' class="loadImg"><img src="assets/img/loading-0.gif"/></div>
			<div class="popHeader">
				<span class="header_title">详细信息</span>
				<i class="fa fa-times close_icon" (click)="colsePop()"></i>
			</div>
			<div id="popContent">
				<div class="chartBox" style="height: 35%;padding-bottom:12px;">
					<div style="border:1px solid #ccc;height: 100%;border-radius: 5px;position: relative;">
						<div class="inCheck" onselectstart="return false">
				       		<label class="checkbox-inline" style="font-weight: normal;">
								<input  type="checkbox"  class="checkbox isEnter"  [(ngModel)]='isEnter' (change)="isEnterChange()" />
					            <span  style="margin-left: 0;font-weight: normal;">特价区</span>
					       	</label>
						</div>
						<div id="myChart" style="height: 100%;width: 100%;"></div>
					</div>
				</div>
				
				
				<div class="mapBox" style="height: 35%;padding: 8px;border:1px solid #ccc;border-radius: 5px;" > 
					<div id="baiduMap" style="height: 100%;width: 100%;"></div>
				</div>
				<div class="mapBox" style="height: 20%;padding: 12px 0;" > 
					<div style="overflow: auto;border:1px solid #ccc;padding: 8px 0;border-radius: 5px;height: 100%;" class="row">
						<p class="col-xs-12" style="font-size: 15px;font-weight: bold;line-height: 24px;">基本信息</p>
						<div *ngFor="let item of basInformation" class="col-xs-4" style="line-height: 24px;min-width: 180px;font-size: 12px;display: inline-block;padding-left: 12px;">
							<span >{{item.textStr}}<span> : {{item.value}}</span></span>
						</div>
					</div>
				</div>
				<div class="mapBox" style="height: 10%;"></div>
				
				<div class="pop_button" (click)="isShow()">
		  			<img src="assets/img/side_arrow.png" id = 'rotate' />
		  		</div>
				
			</div>
			
		</div>
	</div>
</div>
